<template>
  <div class="example">
    <p>pageRoute：#/vueKey</p>
    <br />
    <hr />
    <p>
      在不使用key的情况，vue会进行这样的操作(这里使用了数组的index作为key)：
    </p>
    <hr />
    <ul class="smallexample">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addOneData">往数组最前面添加一个数</button>
    <div class="smallexample">
      <p>
        可以在控制台发现增加一个就把全部li都替换掉了一遍重新渲染,为什么会这样呢
      </p>
      <pre>
        在进行子节点的 diff算法 过程中，会进行 旧首节点和新首节点的sameNode对比，这一步命中了逻辑，因为现在新旧两次首部节点 的 key 都是 0了，同理，key为1和2的也是命中了逻辑，导致相同key的节点会去进行patchVnode更新文本，而原本就有的c节点，却因为之前没有key为4的节点，而被当做了新节点，所以很搞笑，使用index做key，最后新增的居然是本来就已有的c节点。所以前三个都进行patchVnode更新文本，最后一个进行了新增，那就解释了为什么所有li标签都更新了。
        作者：Sunshine_Lin 链接：https://juejin.cn/post/6994959998283907102
        来源：稀土掘金

      </pre>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return { items: ['a', 'b', 'c', 'd', 'e'] }
  },
  methods: {
    addOneData() {
      this.items.unshift(
        String.fromCharCode(90 + Math.floor(Math.random() * 25))
      )
    }
  },
  mounted() {
    setTimeout(() => {
      // this.items.splice(2, 0, 'f') //
      console.time()
      this.items.splice(0, 1)
    }, 2000)
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped></style>
